/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="resource-pie__wrap resource-pie-user-vgpu__wrap">
        <div class="pie-left">
            <p class="title">{{ data.title }}</p>
            <div>
                <div style="display: inline-block;">
                    <img class="pie-left-img" :src="data.img">
                </div>
                <div style="display:inline-block;">
                    <div class="resource-pie-user__vgpu-type">
                        <span>类型：</span>
                        <sf-select
                                v-model="vGpuType"
                                :placeholder="_('请选择')"
                                :default-width="130"
                                display-field="vGpuType"
                                value-field="vGpuType"
                                :options="vGpuTypeOpts"></sf-select>
                    </div>
                    <span class="sub-desc-vgpu">
                        <span class="sub-desc-left-vgpu">vGPU数量：{{ selectVgpuData.vGpuNum }} 张</span>
                        <span>显存：{{ selectVgpuData.vGpuMemory }} GB</span>
                    </span>
                </div>
            </div>
        </div>
        <div class="pie-left-right" style="display: inline-block;">
            <sf-e-charts
                    ref="myChart"
                    :options="defaultOption"
                    :auto-destroy="false"
                    :auto-refresh="true"
                    class="pie pie-user"></sf-e-charts>
            <div class="user-info">
                <div class="content-vgpu-title content m-b10">
                    vGPU
                </div>
                <div class="content-vgpu-value content m-b10">
                    已分配 <b class="content-vgpu-title">{{ selectVgpuData.allocatedVGpuNum }}</b> 个
                </div>
            </div>
            <sf-e-charts
                    ref="myChart"
                    :options="allocateDefaultOption"
                    :auto-destroy="false"
                    :auto-refresh="true"
                    class="pie pie-user"></sf-e-charts>
            <div class="user-info">
                <div class="content-vgpu-title content m-b10">
                    显存
                </div>
                <div class="content-vgpu-value content m-b10">
                    已分配 <b class="content-vgpu-title">{{ selectVgpuData.allocatedVGpuMemory }}</b> GB
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less">
.resource-pie-user-vgpu__wrap {
    margin-top: 5px;
    .pie-left {
        border: none;
        border-right: 1px solid #EEE;
        display:inline-block;
        width: 320px;
        vertical-align: super;
        position: relative;
        top: -10px;
    }
    .pie-user {
        display: inline-block;
        width: 150px;
    }
    .resource-pie-user__vgpu-type {
        margin-bottom: 10px;
    }
    .pie-left-right {
        margin-left: 20px;
    }
    .user-info {
        display: inline-block;
        position: relative;
        top: -30px;
        left: -10px;
        margin-right: 20px;
    }
    .content-vgpu-title {
        color: #1F1F1F;
    }
    .content-vgpu-value {
        color: #A3A3A3;
    }
}
</style>
<script>

// 引入基本模板
import BaseChart from './base_chart';
export default {
    mixins: [BaseChart],
    props: {
        data: {
            type: Object, required: true, default: () => {
                return {
                };
            }
        }
    },
    data () {
        return {
            vGpuType: '',
            vGpuTypeOpts: [],
            selectVgpuData: {},

            myChart: null,
            myChartSecond: null,
            seriesData: [],
            defaultOption: {},
            allocateDefaultOption: {},
            percent: '',
            allocatedseriesData: []
        };
    },

    watch: {
        vGpuType () {
            this.selectVgpuData = this.data?.vgpus?.find(item => item.vGpuType === this.vGpuType) || {};
            this.$nextTick().then(() => {
                this.initData();
            });
        }
    },
    mounted () {
        this.myChart = this.$refs.myChart;
        this.myChartSecond = this.$refs.myChartSecond;
        this.getVgouInfo();
    },
    methods: {
        getVgouInfo () {
            this.vGpuTypeOpts = this.data?.vgpus?.map(item => item.vGpuType) || [];
            this.vGpuType = '全部资源';
        },

        // 初始化数据
        initData () {
            this.seriesData = this._getVgpuSeriesData();
            let seriesData = this.seriesData;
            let seriesText = this.selectVgpuData.allocatedTotalVGpuNumUsage < 100 ?
                this.selectVgpuData.allocatedTotalVGpuNumUsage :
                ((this.selectVgpuData.allocatedVGpuNum/this.selectVgpuData.vGpuNum) * 100).toFixed();

            // 绘制图表
            this.defaultOption = {
                title: {
                    text: `${seriesText}%`,
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontSize: '20'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter (data) {
                        let { seriesName, name } = data;
                        let { showValue } =  data.data;
                        return `${seriesName}<br/>${name} : ${showValue}个`;
                    }
                },
                left: 0,
                yAxis: '50',
                series: [
                    {
                        type: 'pie',
                        name: _('使用情况'),
                        radius: ['88%', '66%'],
                        center: ['50%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'outside'
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        color: ['#567DF5', '#eee'],
                        data: seriesData
                    }
                ]
            };

            this.allocatedseriesData = this._getVgpuMemorySeriesData();
            let allocatedseriesData = this.allocatedseriesData;

            let allocatedseriesText = this.selectVgpuData.allocatedTotalVGpuMemoryUsage < 100 ?
                this.selectVgpuData.allocatedTotalVGpuMemoryUsage :
                ((this.selectVgpuData.allocatedVGpuMemory/this.selectVgpuData.vGpuMemory) * 100).toFixed();

            // 绘制图表
            this.allocateDefaultOption = {
                title: {
                    text: `${allocatedseriesText}%`,
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontSize: '20'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter (data) {
                        let { seriesName, name } = data;
                        let { showValue } =  data.data;
                        return `${seriesName}<br/>${name} : ${showValue}GB`;
                    }
                },
                left: 0,
                yAxis: '50',
                series: [
                    {
                        type: 'pie',
                        name: _('分配情况'),
                        radius: ['88%', '66%'],
                        center: ['50%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'outside'
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        color: ['#567DF5', '#eee'],
                        data: allocatedseriesData
                    }
                ]
            };

            this.onResize();
        },

        _getVgpuSeriesData () {
            let surplusValue = this.selectVgpuData.vGpuNum - this.selectVgpuData.allocatedVGpuNum;
            return [
                {
                    value: (this.selectVgpuData.allocatedVGpuNum > this.selectVgpuData.vGpuNum) ? this.selectVgpuData.vGpuNum : this.selectVgpuData.allocatedVGpuNum,
                    showValue: this.selectVgpuData.allocatedVGpuNum,
                    name: '已分配'
                },
                {
                    value: surplusValue < 0 ? 0 : surplusValue,
                    showValue: surplusValue,
                    name: '剩余分配'
                }
            ];
        },

        _getVgpuMemorySeriesData () {
            let surplusValue = this.selectVgpuData.vGpuMemory - this.selectVgpuData.allocatedVGpuMemory;
            return [
                {
                    value: (this.selectVgpuData.allocatedVGpuMemory > this.selectVgpuData.vGpuMemory) ? this.selectVgpuData.vGpuMemory : this.selectVgpuData.allocatedVGpuMemory,
                    showValue: this.selectVgpuData.allocatedVGpuMemory,
                    name: '已分配'
                },
                {
                    value: surplusValue < 0 ? 0 : surplusValue,
                    showValue: surplusValue,
                    name: '剩余分配'
                }
            ];
        },

        showAllocatedAlert (data) {
            /* eslint-disable */
            let noAllocatedPercent = 100 - data.allocatedPercent;
            return noAllocatedPercent < 10;
        },

        onResize () {
            let vm = this;
            if (vm.myChart && typeof this.myChart.resize === 'function') {
                vm.myChart?.resize();
                vm.myChartSecond?.resize();
            }
        }
    },

    beforeDestroy () {
        if (this.myChart && typeof this.myChart.dispose === 'function') {
            this.myChart?.dispose();
            this.myChartSecond?.dispose();
        }
        this.myChart = null;
        this.myChartSecond = null;
    }
};
</script>

